
<script setup>
import WebRtc from "./components/WebRtc.vue";
import WebGis from "./components/WebGis.vue";
// import {
//   Viewer,
//   Camera,
//   Rectangle,
//   CustomDataSource,
//   CameraEventType,
//   Color,
//   UrlTemplateImageryProvider,
//   Cartesian3,
//   Math,
//   LabelStyle,
//   VerticalOrigin,
//   HorizontalOrigin,
//   PointPrimitiveCollection,
//   KeyboardEventModifier,
//   VelocityOrientationProperty, WebMapTileServiceImageryProvider
// } from 'cesium';
// import {onMounted, ref} from "vue";
// const baseMap = ref()
// onMounted(() => {
//
//   const viewer = new Viewer(baseMap.value, {
//     animation: false, // 动画小组件
//     baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
//     fullscreenButton: false, // 全屏组件
//     vrButton: false, // VR模式
//     geocoder: false, // 地理编码（搜索）组件
//     homeButton: false, // 首页，点击之后将视图跳转到默认视角
//     infoBox: false, // 信息框
//     sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
//     selectionIndicator: false, //是否显示选取指示器组件
//     timeline: false, // 时间轴
//     navigationHelpButton: false, // 帮助提示，如何操作数字地球。
//     // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
//     navigationInstructionsInitiallyVisible: false
//   });
//   viewer.cesiumWidget.creditContainer.style.display = "none";
//
//   const ditu = new WebMapTileServiceImageryProvider({
//     url: "http://gisserver.tianditu.gov.cn/TDTService/wfs",
//     layer: 'tdtVecBasicLayer',
//     style: 'default',
//     format: 'tiles',
//     tileMatrixSetID: 'GoogleMapsCompatible',
//     show: true // 可选，是否默认显示
//   })
//
//   // const annLayer = new UrlTemplateImageryProvider({
//   //
//   //   url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
//   //
//   //   minimumLevel: 3,
//   //
//   //   maximumLevel: 18
//   //
//   // })
//   viewer.imageryLayers.addImageryProvider(ditu)
//   // viewer.imageryLayers.addImageryProvider(annLayer);
//
//   const position = Cartesian3.fromDegrees(118.923, 32.482, 1785000) //可以根据需求选择坐标与坐标类型
//   viewer.camera.setView({
//     destination: position,                  // 相机位置
//     orientation: {
//       heading: Math.toRadians(0), // 水平旋转  -正北方向
//       pitch: Math.toRadians(-90), // 上下旋转  --俯视朝向
//       roll: 0                                                   // 视口翻滚角度
//     }
//   })
//
//   const vehicleEntity = viewer.entities.add({
//     position: Cartesian3.fromDegrees(118.923, 32.482, 800),
//     orientation: Cartesian3.fromDegrees(118.923, 32.482, 800),
//     label: {
//       text: '张三',
//       font: "20px sans-serif",
//       showBackground: true,
//     },
//   });
//
// //  生成PointPrimitiveCollection对象
//   const pointCollection = viewer.scene.primitives.add(new PointPrimitiveCollection());
//   const pointEntity = pointCollection.add({
//     position : Cartesian3.fromDegrees(1.0, 2.0, 3.0),
//     color : Color.YELLOW
//   });
//   viewer.scene.screenSpaceCameraController.zoomEventTypes = [
//     CameraEventType.WHEEL,
//     CameraEventType.MIDDLE_DRAG,
//     CameraEventType.PINCH
//   ];
//
//   //设置右键旋转
//   viewer.scene.screenSpaceCameraController.tiltEventTypes = [
//     CameraEventType.RIGHT_DRAG,
//     CameraEventType.PINCH,
//
//     {
//       eventType: CameraEventType.RIGHT_DRAG,
//       modifier: KeyboardEventModifier.CTRL
//     },
//
//     {
//       eventType: CameraEventType.MIDDLE_DRAG,
//       modifier: KeyboardEventModifier.CTRL
//     }
//   ];
//
//   setTimeout(() => {
//     // viewer.scene.destroy()
//     pointCollection.remove(pointEntity);
//     viewer.entities.remove(vehicleEntity)
//   }, 3000)
//   //  生成64800个点，每个经度、纬度值各生成一个点，高度为0（贴地表）
// //  每个点都添加到PointPrimitiveCollection对象中
// //   for (var longitude = -180; longitude < 890; longitude++) {
// //     var color = Color.PINK;
// //     if ((longitude % 2) === 0) {
// //       color = Color.CYAN;
// //     }
// //     for (var latitude = -90; latitude < 90; latitude++) {
// //       pointCollection.add({
// //         position : Cartesian3.fromDegrees(longitude, latitude),
// //         color : color
// //       });
// //     }
// //   }
//
//   //  模拟每个点固定向外偏移(1km,1km,1km)(跟时间无关，每帧调用此函数)
//   // function animatePoints() {
//   //   var positionScratch = new Cartesian3();
//   //   var points = pointCollection._pointPrimitives;
//   //   var length = points.length;
//   //   for (var i = 0; i < length; ++i) {
//   //     var point = points[i];
//   //     Cartesian3.clone(point.position, positionScratch);
//   //     Cartesian3.add(
//   //         positionScratch,
//   //         new Cartesian3(1000, 1000, 1000),
//   //         positionScratch);
//   //     point.position = positionScratch;
//   //   }
//   // }
//   // viewer.scene.preRender.addEventListener(animatePoints);
//
//
//
//   // var pointEntity = viewer.entities.add({
//   //   position: Cartesian3.fromDegrees(-75.1641667, 39.9522222), // 经度和纬度
//   //   point: {
//   //     pixelSize: 10,
//   //     color: Color.RED,
//   //     outlineColor: Color.WHITE,
//   //     outlineWidth: 5
//   //   },
//   //   label: {
//   //     text: '张三',
//   //     style: LabelStyle.FILL,
//   //     backgroundColor: new Color(0,0,0,1),
//   //     verticalOrigin: VerticalOrigin.BOTTOM,
//   //     horizontalOrigin: HorizontalOrigin.RIGHT
//   //   }
//   // });
//   //
//   // console.log(pointEntity, 1)
//
//
//   // Camera.DEFAULT_VIEW_RECTANGLE  = Rectangle.fromDegrees(119.9, 30.7501282784158, 121.33, 31.9645982738191);
//   // let duration = 2;
//   // viewer.camera.flyHome(duration)
//
//   // viewer.camera.flyTo({
//   //   destination : Cartesian3.fromDegrees(119.9, 30.7501282784158, 16850.33)
//   // });
// })

</script>

<template>
  <div style="position: relative;width: 100%; height: 100vh;background: rgba(0,236,109,0.06)">
    <web-gis />
<!--    <web-rtc />-->
<!--      <div ref="baseMap" class="baseMap"></div>-->
<!--    <button @click="dsada">销毁</button>-->
  </div>
</template>

<style scoped>

.baseMap {
  width: 100%;
  height: 800px;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
